<!--
 * @Description: 
 * @Author: Pengfei Zhang
 * @Date: 2021-09-03 10:41:33
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 17:52:57
-->
<template>
  <text class="task-status" :class="[getColor(state)]">
    {{ status[state] }}
  </text>
</template>

<script>
export default {
  props: {
    state: {
      type: [Number, String]
    },
    defaultColor: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      status: {
        1: '待执行',
        2: '执行中',
        3: '疑问反馈',
        4:'疑问反馈',
        5: '已取消',
        6: '已完成',
      },
    }
  },
  methods: {
    getColor(state) {
      let colorList = {
        1: 'daichuli',
        2: 'zhihangzhong',
        3: 'yiwenfankui',
        4: 'yiwenfankui',
        5: 'yijingquxiao',
        6: 'yiwancheng',
      }
      return colorList[state]
    }
  }
}
</script>

<style lang="scss" scoped>
.task-status {
  font-size: 24rpx;
  line-height:24rpx;
  padding-left:30rpx;
  vertical-align: middle;
}
.iconfont{
  font-size:22rpx;
  margin-right:6rpx;
}
.daichuli {
  color: #FF5151;
  background: url('@/static/images/pending.png') left center no-repeat;
  background-size: 24rpx;
}
.zhihangzhong {
  color: #027AFF;
  background: url('@/static/images/processing.png') left center no-repeat;
  background-size: 24rpx;
}
.yiwenfankui {
  color: #F8AF33;
  background: url('@/static/images/doubt.png') left center no-repeat;
  background-size: 24rpx;
}
.yijingquxiao {
  color: #000;
  opacity: 0.3;
  background: url('@/static/images/cancel.png') left center no-repeat;
  background-size: 24rpx;
}
.yiwancheng {
  color: #00D694;
  background: url('@/static/images/finished.png') left center no-repeat;
  background-size: 24rpx;
}
.default{
  color: #ffffff;
}
</style>